<template>
  <div class="shareContainer" ref="shareContainer">
    <div class="sharecontent">
      <!-- 头部内容 -->
      <div class="searchContainer">
        <el-form ref="form" :model="searchData" :inline="true">
          <el-form-item label="运单号" size="mini">
            <el-input v-model="searchData.waybill_no" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="温度计" size="mini">
            <el-input v-model="searchData.device_no" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="受理状态" size="mini">
            <el-select v-model="searchData.status" style="width: 120px">
              <el-option label="未受理" value="0">未受理</el-option>
              <el-option label="已受理" value="1">已受理</el-option>
              <!-- <el-option label="自动取消" value="2">自动取消</el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="预警类型" size="mini">
            <el-select v-model="searchData.warningType" style="width: 120px">
              <el-option
                v-for="type in warningTypeList"
                :key="type.item_code"
                :label="type.item_name"
                :value="type.item_code"
              />
            </el-select>
          </el-form-item>
          <el-form-item size="mini">
            <el-button
              type="primary"
              icon="el-icon-search"
              data-tracker="P36-1"
              @click="displayList(1, 10)"
              >查询</el-button
            >
            <el-button
              icon="el-icon-refresh-left"
              data-tracker="P36-2"
              @click="resultClickFn"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- <div class="sharecontent_header">
        <div class="sharecontent_header_left">
          <el-button data-tracker="P36-3" v-permission="'earlywarning_record_deal'" type="primary" plain
            @click="handleAcceptanceClick">受理</el-button>
        </div>

      </div> -->
      <!-- 表单内容 -->
      <div class="sharecontent_content">
        <el-table
          :data="tableData"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          border
          stripe
          style="width: 100%"
          :max-height="maxheight"
        >
          <el-table-column fixed type="selection" width="50"> </el-table-column>
          <el-table-column fixed type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column fixed prop="waybill_no" label="运单编号" width="150">
          </el-table-column>
          <el-table-column prop="rule_name" label="预警规则名称" width="290">
          </el-table-column>
          <el-table-column prop="record_type" label="预警类型" width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.record_type | afterTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="device_no" label="温度计" width="200">
          </el-table-column>
          <el-table-column prop="status" label="受理状态" width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.status | sms_type_data }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="deal_user_name" label="受理人" width="100">
          </el-table-column>
          <el-table-column prop="deal_time" label="受理时间" width="180">
          </el-table-column>
          <el-table-column prop="create_time" label="记录时间" width="180">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                v-if="scope.row.status == 0"
                >受理</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="handleDetail(scope.row, 1)"
                v-if="scope.row.status == 1"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div
        style="
          display: flex;
          margin: 10px 0px 0px 0px;
          justify-content: flex-end;
        "
      >
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum"
        >
        </el-pagination>
      </div>
      <div>
        <el-dialog title="受理" :visible.sync="dialogVisible" width="50%">
          <el-form
            label-position="right"
            label-width="80px"
            :model="fromdata"
            :disabled="dialogType"
          >
            <el-form-item label="受理方案">
              <el-input
                v-model="fromdata.deal_step"
                type="textarea"
                :rows="7"
              ></el-input>
            </el-form-item>
            <el-form-item label="受理时间">
              <el-date-picker
                v-model="fromdata.deal_time"
                type="datetime"
                placeholder="选择日期时间"
                :clearable="false"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="受理人" v-if="dialogType == true">
              <el-tag style="margin: 0px 10px 0px 0px">{{
                deal_user_name
              }}</el-tag>
            </el-form-item>
            <el-form-item label="通知人" v-if="dialogType == true">
              <el-tag
                v-for="(item, index) in informatpeople"
                :key="index"
                style="margin: 0px 10px 0px 0px"
                >{{ item }}</el-tag
              >
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="handleAcceptanceClick()"
              v-if="dialogType == false"
              >受 理</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  overRecordList,
  reqDictionaryOptions,
  EarlywarningRecordDeal,
  recordDetail,
} from "@/api/earlywarning";
export default {
  data() {
    return {
      maxheight: "auto",
      pickerOptions: {
        // 时间选择器的快选项
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      searchData: {
        status: "", //报警标题
        warningType: "", //预警类型
        waybill_no: "", //运单号收索
        device_no: "", //温度计
      },
      tableData: [],
      tableData_copy: [],
      pageSize: 20, //一页几条
      pageNum: 1, //第几页
      totalNum: 100, //列表总数
      warningTypeList: [
        { item_name: "超时预警", item_code: "1" },
        { item_name: "超温预警", item_code: "2" },
        { item_name: "离线预警", item_code: "3" },
      ], //预警类型
      multipleSelection: [],
      orderIdNums: [],
      statusId: [],
      dialogVisible: false,
      fromdata: {
        deal_step: "", //受理方案
        deal_time: new Date(), //受理时间
        ids: [], //受理记录ids
      },
      informatpeople: [],
      dialogType: false,
      deal_user_name: "",
    };
  },
  components: {},
  mounted() {
    this.displayList(this.pageNum, this.pageSize);
    this.getOptionsList();
  },
  filters: {
    afterTime(value) {
      if (value == 1) {
        return "超时预警";
      } else if (value == 2) {
        return "超温预警";
      } else if (value == 3) {
        return "离线预警";
      }
      // return "导出错误数据";
    },
    sms_type_data(value) {
      switch (value) {
        case "0":
          return "未受理";
          break;
        case "1":
          return "已受理";
          break;
        default:
          return "自动取消";
      }
    },
  },
  methods: {
    //重置按钮
    resultClickFn() {
      Object.assign(this.$data.searchData, this.$options.data().searchData);
      this.displayList(this.pageNum, this.pageSize);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (val.length > 0) {
        for (var i = 0; i < this.multipleSelection.length; i++) {
          this.orderIdNums = this.multipleSelection.map((item) =>
            Number(item.id)
          );
          this.statusId = this.multipleSelection.map((item) => item.status);
        }
      } else {
        this.orderIdNums = [];
        this.statusId = [];
      }
    },
    handleAcceptanceClick() {
      var param = {
        deal_step: this.fromdata.deal_step,
        deal_time: this.fromdata.deal_time / 1000 + "",
        ids: this.fromdata.ids.map(Number),
      };
      EarlywarningRecordDeal(param).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "受理成功",
            type: "success",
          });
          this.displayList(this.pageNum, this.pageSize);
          this.dialogVisible = false;
        }
      });
      // if (this.orderIdNums && this.orderIdNums.length !== 0) {
      //   const data = {
      //     ids: this.orderIdNums
      //   };
      //   if (this.statusId.includes("1")) {
      //     this.$message({
      //       type: "warning",
      //       message: "已受理状态不能再进行受理",
      //     });
      //   } else {
      //     EarlywarningRecordDeal(data).then((res) => {
      //       if (res.code === 10000) {
      //         this.$message({
      //           message: "受理成功",
      //           type: "success",
      //         });

      //         this.displayList(this.pageNum, this.pageSize);
      //       }
      //     });
      //   }
      // } else {
      //   this.$message({
      //     message: "请至少选择一项数据才能受理！",
      //     type: "error",
      //   });
      // }
    },
    async displayList(pageNumval, pageSizeval) {
      let result = await overRecordList({
        page: pageNumval,
        page_size: pageSizeval,
        record_type: this.searchData.warningType,
        status: this.searchData.status,
        waybill_no: this.searchData.waybill_no,
        device_no: this.searchData.device_no,
      });
      if (result.code === 10000 && result.data.list !== null) {
        result.data.list !== null
          ? result.data.list.forEach((item) => {
              // item.record_type = item.record_type === "2" ? "超温预警" : "超时预警";
              item.warning_type =
                item.warning_type === "1"
                  ? "揽收"
                  : item.warning_type === "2"
                  ? "仓储"
                  : item.warning_type === "3"
                  ? "干线"
                  : item.warning_type === "4"
                  ? "配送"
                  : item.warning_type === "5"
                  ? "回单"
                  : "对账";
              item.create_time = new Date(Number(item.create_time) * 1000)
                .toLocaleString()
                .replace(/:\d{1,2}$/, " ");
              item.deal_time =
                item.deal_time !== "0"
                  ? new Date(Number(item.deal_time) * 1000)
                      .toLocaleString()
                      .replace(/:\d{1,2}$/, " ")
                  : "";
            })
          : "";
        this.tableData = result.data.list;
        if (this.tableData.length > 6) {
          //一排操作栏
          this.maxheight = document.documentElement.clientHeight - 245;
        } else {
          this.maxheight = "auto";
        }
        this.tableData_copy = JSON.parse(JSON.stringify(this.tableData));
        this.pageNum = result.data.pagination.current_page;
        this.pageSize = result.data.pagination.per_page_count;
        this.totalNum = result.data.pagination.total;
      } else {
        this.tableData = [];
        this.pageNum = 1;
        this.pageSize = 20;
        this.totalNum = 0;
      }
    },
    async getOptionsList() {
      let result2 = await reqDictionaryOptions({
        dictionary_code: "earlywarning",
      });
      // this.warningTypeList = result2.data.list;
    },
    // searchRecordList() {
    //   //查询
    //   if (this.searchData.warningType) {
    //     this.tableData = this.tableData_copy.filter((item) => {
    //       return item.record_type.indexOf(this.searchData.warningType) !== -1;
    //     });
    //   }
    //   if (this.searchData.contentTitle) {
    //     this.tableData = this.tableData.filter((item) => {
    //       return item.name.indexOf(this.searchData.contentTitle) !== -1;
    //     });
    //   }
    //   // if (this.searchData.warningTarget) {
    //   //   this.tableData = this.tableData.filter((item) => {
    //   //     return item.receiver.indexOf(this.searchData.warningTarget) !== -1;
    //   //   });
    //   // }
    // },
    handleClick(value) {
      this.dialogVisible = true;
      this.fromdata.ids = [value.id];
      this.fromdata.deal_step = "";
      this.fromdata.deal_time = new Date();
      // Object.assign(this.$data.fromdata, this.$options.data().fromdata);
      this.dialogType = false;
    },
    handleSizeChange(val) {
      this.pageSize = val; //一页多少条
      this.displayList(this.pageNum, this.pageSize);
    },
    handleCurrentChange(val) {
      this.pageNum = val; //第多少页
      this.displayList(this.pageNum, this.pageSize);
    },
    handleCloseTime() {
      //关闭超时
      this.timeVisible = false;
    },
    handleCloseTemp() {
      //关闭超温
      this.tempVisible = false;
    },
    handleDetail(value) {
      this.dialogType = true;
      var param = {
        id: value.id,
      };
      recordDetail(param).then((res) => {
        if (res.code == 10000) {
          this.dialogVisible = true;
          this.deal_user_name = res.data.deal_user_name;
          this.fromdata.deal_step = res.data.deal_step;
          this.fromdata.deal_time = res.data.deal_time * 1000;
          const noticeNames = res.data.items.map((item) => item.notice_name);
          this.informatpeople = [...new Set(noticeNames)];
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.shareContainer {
  padding: 10px 15px;
  background-color: #fff;

  // 内容
  .sharecontent {
    background: white;

    // 头部内容
    .sharecontent_header {
      .sharecontent_header_right {
        display: inline-block;
      }

      .sharecontent_header_left {
        float: left;
        padding: 0px 8px 10px 0px;
      }

      .sharecontent_header_right {
        float: right;
        padding: 0px 8px 10px 0px;
      }
    }

    // 表单内容
    .sharecontent_content {
    }

    .addWarehouse {
      .form {
        .el-form {
          .el-form-item {
            width: 350px;
          }
        }
      }
    }
  }
}
</style>